<template>
	<view class="searchInput">
		<!-- #ifndef MP -->
		<image  v-if="State == 0" src="../../static/ic_back_dark_center.png" @click="goBack" />
		<!-- #endif -->
		<view class="input">
			<input ref="input" type="text" :value="value" placeholder="请输入食物名称" @input="input" focus />
			<image class="function img_min1" v-if="isShow" src="../../static/ic_library_scan.png" />
			<image class="function img_min2" v-else src="../../static/ic_analyze_cancel.png" @click="detaleValue" />
		</view>
		<image src="../../static/ic_homepage_search.png" @click="$emit('to-search')" />
	</view>
</template>

<script>
	var _ = require("lodash");
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		name: "SearchInput",
		props: ["value"],
		computed: {
			...mapState(["State"]),
		},
		data() {
			return {
				isShow: true,
			};
		},
		methods: {
			...mapMutations(["toggleState"]),
			goBack: function() {
				//#ifndef MP
				this.$router.push({
					path: '/'
				});
				//#endif

				//#ifdef MP
				uni.navigateBack();
				//#endif
			},
			input: _.debounce(function(e) {
				let val = e.target.value.trim();
				this.$emit("input-value", val);
			}, 300),
			detaleValue: function() {
				this.$emit("input-value", "");
			},
		},
		  watch: {
		    value: function (val) {
		      if (val != "") {
		        this.isShow = false;
		      } else {
		        this.isShow = true;
		      }
		    },
		  },
	}
</script>

<style lang="scss" scoped>
.searchInput {
  height: 55px;
  background: white;
  border-bottom: 1px solid #dbdbde;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  image {
    width: 35px;
    height: 35px;
  }
  .input {
    flex: 1;
    margin: 0 5px;
    position: relative;
    height: 30px;
    width: 100%;
    background: #f6f6f6;
    border-radius: 5px;
	display: flex;
	align-items: center;
    input {
		text-align: left;
      background: #f6f6f6;
      height: 95%;
      width: 80%;
      border: 0;
      float: left;
      font-size: 14px;
      // text-indent: 1rem;
	  padding-left: 10px;
    }
    .function {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
    }
    .img_min1 {
      top: -2px;
      right: 0px;
    }
    .img_min2 {
      width: 20px;
      height: 20px;
      top: 6px;
      right: 10px;
    }
  }
}
</style>
